<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>test</title>
    <style>
      body {
        /* overflow: auto; */
      }
      .name[my] {
        color: red;
      }
      .box1 {
        width: 900px;
        /* height: 300px; */
        background-color: #000;
        display: grid;
        grid-template-columns:repeat(auto-fill,minmax(50px,1fr));
        gap: 30px;
      }
      .box2 {
        height: 100px;
        background-color: #f00;
        margin-top: 100px;
      }
     
    </style>
  </head>

  <body>
    <div id="app">
      <!-- <span my class="name">姓名:{{name}}</span>
      <span class="name">姓名2:{{name}}</span>
      <input type="text" v-model="name" />
      <img
        src="https://img-blog.csdnimg.cn/b4df5a5eb88347f988942338cb67d423.png"
        alt="这是alt"
        title="暂无数据记录"
      /> -->
      <div class="box1">
        <div class="box2">1</div>
        <div class="box2">2</div>
        <div class="box2">3</div>
        <div class="box2">4</div>
        <div class="box2">5</div>
        <div class="box2">aaa</div>
        <div class="box2">aaa</div>
        <div class="box2">aaa</div>

      </div>
      
    </div>
    <script src="./vue.js"></script>
    <script>
      // confirm("你坏!")
      // const vm = new Vue(
      //   {
      //     el:'#app',
      //     data:{
      //       name:"陈小feng"
      //     }
      //   }
      // )
      //  var a = 2
      //  var a = 4
      //  console.log(a)
      // 绑定解构
      // const obj = { a: 1, b: { c: 2 } };
      // const {a,b:{c:d}} = obj  // a d被声明赋值
      // 赋值解构
      // const numbers = [];
      // const obj = { a: 1, b: 2 };
      // ({ a: numbers[0], b: numbers[1] } = obj);
      // 默认值 只有undefined才有用
      // const { b = 1 } = { b: undefined };
      // 解构变量多于源 多余的为undefined
      // const foo = ["one", "two", "three"];
      // const [red, yellow, g,c] = foo;
      // 可以在一个解构表达式中交换两个变量的值。
      // let a = 1;
      // let b = 3;
      // [a, b] = [b, a];
      // console.log(a); // 3
      // console.log(b); // 1
      // const arr = [1, 2, 3];
      // [arr[2], arr[1]] = [arr[1], arr[2]];
      // 解析一个从函数返回的数组或对象
      // function f() {
      //   return { a: "22", b: 22 };
      // }
      // const { a, b } = f();
      // 忽略某些返回值
      // function f() {
      //   return [1, 2, 3];
      // }
      // const [, ...a] = f();
      // console.log(a); // 1
      // console.log(b); // 3
      // const [c] = f();
      // console.log(c); // 1
      // [, ,] = f(); // 全忽略
      //使用绑定模式作为剩余属性
      // const [a, b, ...{ pop, push }] = [1, 2];
      // console.log(a, b); // 1 2
      // console.log(pop, push); // [Function pop] [Function push]

      // 选择排序plus，每次循环比出最小的和最大的，最外层的循环次数可以少一半（近）
      // const sort = (arr) => {
      //   for (let i = 0, len = arr.length; i < len / 2; i++) {
      //     let minIndex = i;
      //     let maxIndex = i;
      //     for (let j = i + 1; j < len; j++) {
      //       if (arr[minIndex] > arr[j]) {
      //         minIndex = j;
      //       }
      //       if (arr[maxIndex] < arr[j]) {
      //         maxIndex = j;
      //       }
      //     }
      //     if (maxIndex === minIndex) {
      //       // 经过比较后不会再变了，说明已经好了，跳出循环
      //       break;
      //     }
      //   }
      //   return arr;
      // };
      // const arr = [4, 1, 2, 3, 6, 5];

      // 交换法插入排序
      // const sort = (arr) => {
      //   for (let i = 1, len = arr.length; i < len; i++) {
      //     let j = i;
      //     while (j >= 1 && arr[j] < arr[j - 1]) {
      //       [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
      //       j--;
      //     }
      //   }
      //   return arr;
      // };

      // function f(a,b,c){
      //   console.log(arguments)
      //   let mya='1',age=22,name='a'
      //   this.foo= function() {
      //      let year = age
      //      console.log(year)
      //   }
      // }
      // let f1 = new f(1,2,3)
      // let myname = {
      //   1:22,
      //   2:22
      // }

 

    </script>
  </body>
</html>
